<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>Archive | Sonic&#39;s Blog</title>
  <meta property="og:type" content="website">
<meta property="og:title" content="Sonic&#39;s Blog">
<meta property="og:url" content="https://sonicwater.gitee.io/archives/index.html">
<meta property="og:site_name" content="Sonic&#39;s Blog">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Sonic">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://sonicwater.gitee.io/archives/index.html">
  
    <link rel="alternate" href="/atom.xml" title="Sonic&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 5.4.0"></head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/sonicwater" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">Sonic</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">An Castaway Engineer Of Front End.</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Beijing, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="Type something..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">Home</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">Archives</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">Categories</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">Tags</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/sonicwater" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <img width="200" src="/images/board.png" />
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">Categories</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Angular/">Angular</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Axios/">Axios</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Extensive/">Extensive</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript-Code/">JavaScript Code</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript-Learn/">JavaScript Learn</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Server/">Server</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">6</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tags</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angular/" rel="tag">Angular</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Axios/" rel="tag">Axios</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Css/" rel="tag">Css</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/" rel="tag">Git</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a><span class="tag-list-count">16</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/" rel="tag">React</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Server/" rel="tag">Server</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/" rel="tag">TypeScript</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue/" rel="tag">Vue</a><span class="tag-list-count">6</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/Angular/" style="font-size: 13px;">Angular</a> <a href="/tags/Axios/" style="font-size: 13.5px;">Axios</a> <a href="/tags/Css/" style="font-size: 13px;">Css</a> <a href="/tags/Git/" style="font-size: 13.5px;">Git</a> <a href="/tags/JavaScript/" style="font-size: 14px;">JavaScript</a> <a href="/tags/React/" style="font-size: 13.25px;">React</a> <a href="/tags/Server/" style="font-size: 13px;">Server</a> <a href="/tags/TypeScript/" style="font-size: 13.75px;">TypeScript</a> <a href="/tags/Vue/" style="font-size: 13.75px;">Vue</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">Archive</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/06/">June 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/05/">May 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/04/">April 2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">March 2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/02/">February 2021</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">January 2021</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/">October 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">September 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/TypeScript/">TypeScript</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/Vue/">Vue</a>
              </p>
              <p class="item-title">
                <a href="/2021/06/07/vue/demo/vue3-ts-vuex4/" class="title">Vue3 TypeScript 配置 Vuex4</a>
              </p>
              <p class="item-date">
                <time datetime="2021-06-07T07:37:39.000Z" itemprop="datePublished">2021-06-07</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Angular/">Angular</a>
              </p>
              <p class="item-title">
                <a href="/2021/05/13/angular/angular-ng-zorro-login-demo/" class="title">Angular11 + NG-ZORRO 登录 Demo</a>
              </p>
              <p class="item-date">
                <time datetime="2021-05-13T08:56:53.000Z" itemprop="datePublished">2021-05-13</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Axios/">Axios</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/React/">React</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/TypeScript/">TypeScript</a>
              </p>
              <p class="item-title">
                <a href="/2021/04/26/react/demo/react-hooks-ts-axios/" class="title">React Ts 项目配置 Axios</a>
              </p>
              <p class="item-date">
                <time datetime="2021-04-26T07:29:42.000Z" itemprop="datePublished">2021-04-26</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Git/">Git</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/Server/">Server</a>
              </p>
              <p class="item-title">
                <a href="/2021/04/25/git/server/" class="title">在服务器上部署本地代码</a>
              </p>
              <p class="item-date">
                <time datetime="2021-04-25T02:14:07.000Z" itemprop="datePublished">2021-04-25</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/Axios/">Axios</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/TypeScript/">TypeScript</a><i class="icon icon-angle-right"></i><a class="category-link" href="/categories/Vue/">Vue</a>
              </p>
              <p class="item-title">
                <a href="/2021/04/21/vue/demo/vue3.0-ts-axios/" class="title">vue3.0 ts版项目配置axios</a>
              </p>
              <p class="item-date">
                <time datetime="2021-04-21T04:22:26.000Z" itemprop="datePublished">2021-04-21</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  	<article class="content article article-archives article-type-list" itemscope="">
	    <header class="article-header">
	      <h1 itemprop="title">Archive</h1>
	      <p class="text-muted">Total 10 articles</p>
	    </header>
	    <div class="article-body">
	      
  
  
    
    
      
      
      <section class="panel panel-default b-no">
        <div class="panel-heading" role="tab">
          <h3 class="panel-title">
            <a data-toggle="collapse" href="#collapse2021" aria-expanded="true">
              <i class="icon icon-calendar-plus text-active"></i><i class="icon icon-calendar-minus text"></i>
              2021
            </a>
            <!-- <a href="/archives/2021" class="archive-year">2021</a> -->
          </h3>
        </div>
        <div id="collapse2021" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading2021">
        <div class="panel-body">
          <div class="collection">
    
    
<a href="/2021/06/07/vue/demo/vue3-ts-vuex4/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-06-07T07:37:39.000Z" itemprop="datePublished">2021-06-07</time>
  <span>&nbsp;&nbsp;&nbsp;</span> Vue3 TypeScript 配置 Vuex4
</a>


  
    
    
    
<a href="/2021/05/13/angular/angular-ng-zorro-login-demo/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-05-13T08:56:53.000Z" itemprop="datePublished">2021-05-13</time>
  <span>&nbsp;&nbsp;&nbsp;</span> Angular11 + NG-ZORRO 登录 Demo
</a>


  
    
    
    
<a href="/2021/04/26/react/demo/react-hooks-ts-axios/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-26T07:29:42.000Z" itemprop="datePublished">2021-04-26</time>
  <span>&nbsp;&nbsp;&nbsp;</span> React Ts 项目配置 Axios
</a>


  
    
    
    
<a href="/2021/04/25/git/server/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-25T02:14:07.000Z" itemprop="datePublished">2021-04-25</time>
  <span>&nbsp;&nbsp;&nbsp;</span> 在服务器上部署本地代码
</a>


  
    
    
    
<a href="/2021/04/21/vue/demo/vue3.0-ts-axios/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-21T04:22:26.000Z" itemprop="datePublished">2021-04-21</time>
  <span>&nbsp;&nbsp;&nbsp;</span> vue3.0 ts版项目配置axios
</a>


  
    
    
    
<a href="/2021/04/19/vue/demo/typescript-axios/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-19T10:41:18.000Z" itemprop="datePublished">2021-04-19</time>
  <span>&nbsp;&nbsp;&nbsp;</span> typescript 配置 axios
</a>


  
    
    
    
<a href="/2021/04/14/git/often/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-14T08:48:27.000Z" itemprop="datePublished">2021-04-14</time>
  <span>&nbsp;&nbsp;&nbsp;</span> Git 常用命令实战记录
</a>


  
    
    
    
<a href="/2021/04/08/javascript/code/005-Array-Methods/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-04-08T06:34:34.000Z" itemprop="datePublished">2021-04-08</time>
  <span>&nbsp;&nbsp;&nbsp;</span> JavaScript 数组相关方法实现
</a>


  
    
    
    
<a href="/2021/03/29/javascript/code/004-call-apply-bind/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-03-29T11:01:17.000Z" itemprop="datePublished">2021-03-29</time>
  <span>&nbsp;&nbsp;&nbsp;</span> JavaScript 实现 call、apply、bind
</a>


  
    
    
    
<a href="/2021/03/18/vue/demo/vue-config/" class="collection-item" target="_blank" itemprop="url">
  <time datetime="2021-03-18T10:56:25.000Z" itemprop="datePublished">2021-03-18</time>
  <span>&nbsp;&nbsp;&nbsp;</span> vue.config.js 常用设置
</a>


  
  
    </div></div></div></section>
  

	    </div>
  	</article>
  	
    
    <nav class="bar bar-footer clearfix" data-stick-bottom>
        <div class="bar-inner">
        <ul class="pager pull-left">
            
            <li class="prev disabled">
                <a href="javascript:;">
                    <i class="icon icon-angle-left"></i>
                    Prev
                </a>
            </li>
            
            
            <li class="next">
                <a href="/archives/page/2/">
                    Next
                    <i class="icon icon-angle-right"></i>
                </a>
            </li>
            
        </ul>
        <div class="total-article bar-right">Page 1 of 3</div>
        </div>
    </nav>
    
 	
</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/sonicwater" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>


  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>












</body>
</html>